<!--
  * @author cuixingyu
  * @description: 告警类型进度条
  * @date 2024-07-25
-->
<template>
  <div class="process-wrapper">
    <div class="title-wrapper">
      <div class="title">
        <span>{{ index + 1 }}</span>
        <span>{{ title }}</span>
      </div>
      <div class="value">{{ value }}%</div>
    </div>
    <div class="processBar">
      <div class="process-main" :class="`process-${theme}`" :style="{ width: `${value}%` }"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { toRefs } from 'vue';
  const props = defineProps({
    index: {
      type: Number,
      default: 0,
    },
    title: {
      type: String,
      default: '',
    },
    value: {
      type: String,
      default: '0',
    },
    theme: {
      type: String,
      default: 'deepBlue',
    },
  });
  const { index, title, value, theme } = toRefs(props);
</script>

<style lang="less" scoped>
  .process-wrapper {
    width: 100%;
    height: 38px;
    display: flex;
    flex-flow: column;
    margin-bottom: 18px;
    .title-wrapper {
      width: 100%;
      height: 26px;
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      .title {
        display: flex;
      }
      .value {
        font-family: AlibabaPuHuiTiMedium;
        font-weight: normal;
        font-size: 16px;
        color: rgba(174, 195, 220, 1);
      }
      .title span:first-child {
        width: 54px;
        height: 29px;
        background-color: rgba(118, 154, 220, 0.18);
        text-align: center;
        line-height: 29px;
        font-weight: 800;
        font-size: 16px;
        color: #b6d8ff;
        font-family: 'DIN-Bold';
      }

      .title span:nth-child(2) {
        margin-left: 15px;
        font-family: 'AlibabaPuHuiTi-2-55-Regular';
        font-weight: normal;
        font-size: 16px;
        color: #aec3dc;
        line-height: 29px;
      }
    }
    .processBar {
      width: 100%;
      height: 6px;
      background: rgba(128, 164, 229, 0.2);
      position: relative;
      z-index: 5;
      .process-main {
        position: relative;
        z-index: 10;
        height: 6px;
        opacity: 0.8;
      }
      .process-deepBlue {
        background: linear-gradient(90deg, rgba(49, 97, 250, 1), rgba(98, 147, 198, 1));
      }
      .process-deepGreen {
        background: linear-gradient(90deg, rgba(53, 249, 169, 1), rgba(114, 249, 214, 1));
      }
      .process-blue {
        background: linear-gradient(90deg, rgba(83, 176, 250, 1), rgba(172, 216, 249, 1));
      }
      .process-green {
        background: linear-gradient(90deg, rgba(45, 249, 249, 1), rgba(97, 249, 249, 1));
      }
      .process-purple {
        background: linear-gradient(90deg, rgba(52, 62, 183, 1), rgba(98, 113, 186, 1));
      }
    }
  }
</style>
